<template>
	 <view class="">
	 	<!--动态合成图片的画布-->
	 	 <canvas canvas-id="shareBox"></canvas>
	 	 <!--动态合成图片的画布end-->
	 	 <!--页面展示部分-->
	 	 <view id="content">
	 	   <!-- <view class="f0"><image class="goodsImg" src="/imgs/demo.jpg"></image></view> -->
	 	   <view class="goodsTitle">
	 	     <view class="goodsName">哈根达斯 298元冰淇淋蛋糕</view>
	 	     <view class="goodsPrice">298.00元</view>
	 	  </view>
	 	</view>
	 </view>
</template>

<script>
	 const Page = require('../../../utils/mtj-wx-sdk.js').Page;
	export default {
		data() {
			return {
				shareUrl: "",
				

			}
		},
		methods:{
			drawShareImage() {
			  //绘制canvas图片
			  //创建一个canvas对象
			  const ctx = wx.createCanvasContext('shareBox', this);
			  // this.drawNormalText(ctx, "canvas生成的图片", 0, 0, 30, '#ffffff', 'left', 'middle')
			  // //尺寸比例计算（页面宽度已750为准，即750*scale，所有尺寸乘以scale，即可兼容各种大小屏幕）
			  const scale = wx.getSystemInfoSync().windowWidth / 750
			  //商品主图
			  var bgSize1 = 750 / 500
			  this.drawImage(ctx, "/imgs/demo.jpg", 20, 20, 710, 710 / bgSize1);
			  //绘制商品标题部分
			  var bgSize2 = 750 / 246
			  this.drawImage(ctx, "/imgs/detail-name-bg.jpg", 20, 490, 710, 710 / bgSize2);
			  //绘制分享标题
			  this.drawNormalText(ctx, "canvas生成的图片", 50, 548, 30, '#ffffff', 'left', 'middle')
			  this.drawNormalText(ctx, "230.00元", 50, 660, 30, 'red', 'left', 'middle')
			  this.drawNormalText(ctx, "230.00元", 50 + 1, 660, 30, 'red', 'left', 'middle')
			  this.drawNormalText(ctx, "230.00元", 50, 660 + 1, 30, 'red', 'left', 'middle')
			  this.drawNormalText(ctx, "230.00元", 50 + 1, 660 + 1, 30, 'red', 'left', 'middle')
			  //绘制canvas标记(绘制圆形并加阴影)
			  ctx.arc(120 * scale, 120 * scale, 80 * scale, 0, 5 * scale * Math.PI)
			  ctx.setFillStyle('#22aaff')
			  ctx.setShadow(0, 0, 20 * scale, "#aaaaaa")
			  ctx.fill()
			  this.drawNormalText(ctx, "Canvas", 118, 100, 30, 'white', 'center', 'middle')
			  this.drawNormalText(ctx, "合成", 118, 140, 30, 'white', 'center', 'middle')
			
			  //绘制画布，并在回调中获取画布文件的临时路径
			  var self = this
			  ctx.draw(true, function() {
			    wx.canvasToTempFilePath({
			      canvasId: 'shareBox',
			      success(res) {
			        console.log(res)
			        if (res.tempFilePath) {
			          self.setData({
			            shareUrl: res.tempFilePath
			          })
			          wx.setStorageSync("shareUrl", res.tempFilePath)
			        }
			      }
			    })
			  });
			}, 
			 //绘制图片封装
			 drawImage(ctx, url, x, y, w, h) {
				 // //尺寸比例计算（页面宽度已750为准，即750*scale，所有尺寸乘以scale，即可兼容各种大小屏幕）
				 const scale = wx.getSystemInfoSync().windowWidth / 750
			   ctx.drawImage(url, x * scale, y * scale, w * scale, h * scale);
			 },
			 // 绘制只有一行的文字
			 drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
				 // //尺寸比例计算（页面宽度已750为准，即750*scale，所有尺寸乘以scale，即可兼容各种大小屏幕）
				 const scale = wx.getSystemInfoSync().windowWidth / 750
			   ctx.setFontSize(font * scale);
			   ctx.setFillStyle(style);
			   ctx.setTextAlign(align);
			   ctx.setTextBaseline(baseLine);
			   ctx.fillText(str, x * scale, y * scale);
			 },
		},
		onReady() {
		  this.drawShareImage()
		},
	}


</script>

<style lang="scss" scoped>
.scroll_image {
	// margin-bottom: 200upx;
	height: 85vh;
	.item_page {
		height: 85vh;
		.swiper {
			margin-top: 5vh;
		}
	}
}
.fixed_bottom {
	height: 10vh;
	// margin-top: 40upx;
	background: #fff;
	display: flex;
	position: fixed;
	// position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	justify-content: center;
	padding: 0 100upx;
	align-items: center;
	.bottom_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24upx;
		color: #666;
	}
	.btn_save {
		width: 550upx;
		height: 70upx;
		border-radius: 50upx;
		background: #418cf6;
		font-size: 26upx;
		color: #fff;
		text-align: center;
		line-height: 70upx;
	}
}

.item_style {
	width: 600upx;
	background: #fff;
	border-radius: 15upx;
}
.post_center{
	width: 540rpx;
	height: 550rpx;
	border-radius: 10rpx;
	position: absolute;
	top: 315rpx;
	margin-left: 30rpx;
	background: #fff;
	box-shadow: 0px 0px 25px 0px 
		rgba(0, 0, 0, 0.08);
}
.item_bottom {
	height: 15vh;
	display: flex;
	width: 600upx;
	align-items: center;
	background: #fff;
	justify-content: space-between;
	margin-right: 50upx;
	border-radius: 0 0 15upx 15upx;
}
</style>

